<template>
  <view class="profile">
    <view class="profile-card">
      <wd-cell-group border>
        <wd-cell
          title="账户密码"
          label="定期修改密码有助于保护账户安全"
          value="修改"
          is-link
          @click="handleOpenDialog(DialogType.PASSWORD)"
        />
        <wd-cell
          title="绑定手机"
          :value="userProfile?.mobile"
          is-link
          @click="handleOpenDialog(DialogType.MOBILE)"
        />
        <wd-cell
          title="绑定邮箱"
          :value="userProfile?.email ? userProfile.email : '未绑定邮箱'"
          is-link
          @click="handleOpenDialog(DialogType.EMAIL)"
        />
      </wd-cell-group>
    </view>

    <!--用户信息编辑弹出框-->
    <wd-popup v-model="dialog.visible" position="bottom">
      <wd-form
        v-if="dialog.type === DialogType.PASSWORD"
        ref="passwordChangeFormRef"
        :model="passwordChangeForm"
        custom-class="edit-form"
      >
        <wd-cell-group border>
          <wd-input
            v-model="passwordChangeForm.oldPassword"
            label="原密码"
            label-width="160rpx"
            show-password
            clearable
            placeholder="请输入原密码"
            prop="oldPassword"
            :rules="rules.oldPassword"
          />
          <wd-input
            v-model="passwordChangeForm.newPassword"
            label="新密码"
            label-width="160rpx"
            show-password
            clearable
            placeholder="请输入新密码"
            prop="newPassword"
            :rules="rules.newPassword"
          />
          <wd-input
            v-model="passwordChangeForm.confirmPassword"
            label="确认密码"
            label-width="160rpx"
            show-password
            clearable
            placeholder="请确认新密码"
            prop="confirmPassword"
            :rules="rules.confirmPassword"
          />
        </wd-cell-group>
        <view class="footer">
          <wd-button type="primary" size="large" block @click="handleSubmit">提交</wd-button>
        </view>
      </wd-form>
      <wd-form
        v-if="dialog.type === DialogType.MOBILE"
        ref="mobileBindingFormRef"
        :model="mobileBindingForm"
        custom-class="edit-form"
      >
        <wd-cell-group border>
          <wd-input
            v-model="mobileBindingForm.mobile"
            label="手机号码"
            label-width="160rpx"
            clearable
            placeholder="请输入手机号码"
            prop="mobile"
            :rules="rules.mobile"
          />
          <wd-input
            v-model="mobileBindingForm.code"
            label="验证码"
            label-width="160rpx"
            clearable
            placeholder="请输入验证码"
            prop="code"
            :rules="rules.code"
          >
            <template #suffix>
              <wd-button
                plain
                :disabled="mobileCountdown > 0"
                @click="handleSendVerificationCode('MOBILE')"
              >
                {{ mobileCountdown > 0 ? `${mobileCountdown}s后重新发送` : "发送验证码" }}
              </wd-button>
            </template>
          </wd-input>
        </wd-cell-group>
        <view class="footer">
          <wd-button type="primary" size="large" block @click="handleSubmit">提交</wd-button>
        </view>
      </wd-form>
      <wd-form
        v-if="dialog.type === DialogType.EMAIL"
        ref="emailBindingFormRef"
        :model="emailBindingForm"
        custom-class="edit-form"
      >
        <wd-cell-group border>
          <wd-input
            v-model="emailBindingForm.email"
            label="邮箱"
            label-width="160rpx"
            clearable
            placeholder="请输入邮箱"
            prop="email"
            :rules="rules.email"
          />
          <wd-input
            v-model="emailBindingForm.code"
            label="验证码"
            label-width="160rpx"
            clearable
            placeholder="请输入验证码"
            prop="code"
            :rules="rules.code"
          >
            <template #suffix>
              <wd-button
                plain
                :disabled="emailCountdown > 0"
                @click="handleSendVerificationCode('EMAIL')"
              >
                {{ emailCountdown > 0 ? `${emailCountdown}s后重新发送` : "发送验证码" }}
              </wd-button>
            </template>
          </wd-input>
        </wd-cell-group>
        <view class="footer">
          <wd-button type="primary" size="large" block @click="handleSubmit">提交</wd-button>
        </view>
      </wd-form>
    </wd-popup>
  </view>
</template>
<script setup lang="ts">
import UserAPI, {
  PasswordChangeForm,
  MobileBindingForm,
  EmailBindingForm,
  UserProfileVO,
} from "@/api/system/user";

const validatorConfirmPassword = (value: string) => {
  if (!value) {
    return Promise.reject("请确认密码");
  } else {
    if (value !== passwordChangeForm.newPassword) {
      return Promise.reject("两次输入的密码不一致");
    } else {
      return Promise.resolve();
    }
  }
};
// 本页面中所有的校验规则
const rules = reactive({
  oldPassword: [{ required: true, message: "请填写原密码" }],
  newPassword: [{ required: true, message: "请填写新密码" }],
  confirmPassword: [{ required: true, message: "请确认密码", validator: validatorConfirmPassword }],
  mobile: [{ required: true, pattern: /^1[3-9]\d{9}$/, message: "请填写正确的手机号码" }],
  code: [{ required: true, message: "请填写验证码" }],
  email: [
    {
      required: true,
      pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
      message: "请填写正确的邮箱地址",
    },
  ],
});

enum DialogType {
  PASSWORD = "password",
  MOBILE = "mobile",
  EMAIL = "email",
}

const dialog = reactive({
  visible: false,
  type: "" as DialogType, // 修改账号资料,修改密码、绑定手机、绑定邮箱
});

const userProfile = ref<UserProfileVO>(); //用户信息
const passwordChangeForm = reactive<PasswordChangeForm>({});
const mobileBindingForm = reactive<MobileBindingForm>({});
const emailBindingForm = reactive<EmailBindingForm>({});
const passwordChangeFormRef = ref();
const mobileBindingFormRef = ref();
const emailBindingFormRef = ref();

const mobileCountdown = ref(0);
const mobileTimer = ref<ReturnType<typeof setInterval> | null>(null);

const emailCountdown = ref(0);
const emailTimer = ref<ReturnType<typeof setTimeout> | null>(null);

/** 加载用户信息 */
const loadUserProfile = async () => {
  userProfile.value = await UserAPI.getProfile();
};

/**
 * 打开弹窗
 * @param type 弹窗类型 ACCOUNT: 账号资料 PASSWORD: 修改密码 MOBILE: 绑定手机 EMAIL: 绑定邮箱
 */
const handleOpenDialog = (type: DialogType) => {
  dialog.type = type;
  dialog.visible = true;
  switch (type) {
    case DialogType.PASSWORD:
      passwordChangeForm.oldPassword = "";
      passwordChangeForm.newPassword = "";
      passwordChangeForm.confirmPassword = "";
      break;
    case DialogType.MOBILE:
      mobileBindingForm.mobile = "";
      mobileBindingForm.code = "";
      break;
    case DialogType.EMAIL:
      emailBindingForm.email = "";
      emailBindingForm.code = "";
      break;
  }
};

/**
 *  发送验证码
 *
 * @param contactType 联系方式类型 MOBILE: 手机号码  EMAIL: 邮箱
 */
const handleSendVerificationCode = async (contactType: string) => {
  if (contactType === "MOBILE") {
    mobileBindingFormRef.value.validate("mobile").then(({ valid }: { valid: boolean }) => {
      if (valid) {
        UserAPI.sendVerificationCode(mobileBindingForm.mobile!, "MOBILE").then(() => {
          uni.showToast({ title: "验证码已发送", icon: "none" });
          mobileCountdown.value = 60;
          mobileTimer.value = setInterval(() => {
            if (mobileCountdown.value > 0) {
              mobileCountdown.value -= 1;
            } else {
              clearInterval(mobileTimer.value!);
            }
          }, 1000);
        });
      }
    });
  } else if (contactType === "EMAIL") {
    emailBindingFormRef.value.validate("email").then(({ valid }: { valid: boolean }) => {
      if (valid) {
        UserAPI.sendVerificationCode(emailBindingForm.email!, "EMAIL").then(() => {
          uni.showToast({ title: "验证码已发送", icon: "none" });
          emailCountdown.value = 60;
          emailTimer.value = setInterval(() => {
            if (emailCountdown.value > 0) {
              emailCountdown.value -= 1;
            } else {
              clearInterval(emailTimer.value!);
            }
          }, 1000);
        });
      }
    });
  }
};

// 提交表单
function handleSubmit() {
  if (dialog.type === DialogType.PASSWORD) {
    passwordChangeFormRef.value.validate().then(({ valid }: { valid: boolean }) => {
      if (valid) {
        UserAPI.changePassword(passwordChangeForm).then(() => {
          uni.showToast({ title: "密码修改成功", icon: "none" });
          dialog.visible = false;
        });
      }
    });
  } else if (dialog.type === DialogType.MOBILE) {
    mobileBindingFormRef.value.validate().then(({ valid }: { valid: boolean }) => {
      if (valid) {
        UserAPI.bindMobile(mobileBindingForm).then(() => {
          uni.showToast({ title: "手机号绑定成功", icon: "none" });
          dialog.visible = false;
          loadUserProfile();
        });
      }
    });
  } else if (dialog.type === DialogType.EMAIL) {
    emailBindingFormRef.value.validate().then(({ valid }: { valid: boolean }) => {
      if (valid) {
        UserAPI.bindEmail(emailBindingForm).then(() => {
          uni.showToast({ title: "邮箱绑定成功", icon: "none" });
          dialog.visible = false;
          loadUserProfile();
        });
      }
    });
  }
}

onMounted(() => {
  loadUserProfile();
});
</script>
<style lang="scss" scoped>
.profile {
  .profile-card {
    padding: 10rpx;
    margin-bottom: 24rpx;
    line-height: 1.1;
    background-color: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
  }
  .edit-form {
    padding-top: 40rpx;
    .ef-radio-group {
      line-height: 1;
      text-align: left;
    }
    .footer {
      padding: 24rpx;
    }
  }
}
</style>
